
<!--  MenuTree 开始啦 -->
<template>
  <div class="app">
    <div class="menu">
      <menu-tree>
        <template v-for="item of menuData">
          <menu-item 
            v-if="!item.child"
            :key="item.id"
          >{{ item.title }}</menu-item>
          <circle-item 
              v-else 
              :key="item.id"
              :data="item"></circle-item>
          <!-- <sub-menu 
            v-else
            :key="item.id"
          >
            <template #title>{{ item.title }}</template>
            <template #sub>
              <menu-item
                v-for="c of item.child"
                :key="c.id"
              >{{ c.title }}</menu-item>
            </template>
          </sub-menu> -->
        </template>
      </menu-tree>
    </div>
  </div>
</template>

<script>
import MenuTree from './components/MenuTree/index.vue'
import MenuItem from './components/MenuTree/menuItem.vue'
import SubMenu from './components/MenuTree/subMenu.vue'
import MenuData from './data/menuTree.json'
import CircleItem from './components/MenuTree/circleItem.vue'

export default {
  name: 'App',
  components: {
    MenuTree,
    MenuItem,
    SubMenu,
    CircleItem
  },
  data() {
    return {
      menuData: MenuData
    }
  }
}
</script>

<style>
.menu {
  width: 200px;
}
</style>
<!--  MenuTree 结束啦 -->